<template>
	<view style="height: 100vh; background-color: #FFFFFF;">
		<u-navbar title-color="#FFFFFF" height="48" back-icon-color="#FFFFFF" :border-bottom="false" :is-fixed="true" :title="'数据详情'"></u-navbar>
		<u-form :model="Maintenanceinfo" ref="maintenanceinfoForm" label-width="100px" class="wrap">
			<u-form-item label="企业名称"  >
				<u-input :border="border" type="select" :select-open="enterpriseShow" v-model="Maintenanceinfo.enterpriseName" placeholder="请选择企业" @click="enterpriseShow=true"></u-input>
			</u-form-item>
			<u-form-item label="设备名称" >
				<u-input :border="border" type="select" :select-open="equipmentShow" v-model="Maintenanceinfo.equipmentName" placeholder="请选择设备" @click="equipmentShow=true"></u-input>
			</u-form-item>
			<u-form-item label="维保企业名称">
				<u-input type="text" style="display:none" v-model="Maintenanceinfo.maintenanceEnterprise" />
				<u-input v-model="maintenanceEnterpriseValue" :type="type" :border="border" placeholder="选择企业" @click="maintenanceEnterpriseShow = true" />
				<u-action-sheet :list="maintenanceEnterpriseList" v-model="maintenanceEnterpriseShow" @click="maintenanceEnterpriseCallback"></u-action-sheet>
			</u-form-item>
			<u-form-item label="维保人员名称">
				<u-input type="text" style="display:none" v-model="Maintenanceinfo.maintenanceUser" />
				<u-input v-model="maintenanceUserValue" :type="type" :border="border" placeholder="选择维保人员" @click="maintenanceUserShow = true" />
				<u-action-sheet :list="maintenanceUserList" v-model="maintenanceUserShow" @click="maintenanceUserCallback"></u-action-sheet>
			</u-form-item>
			<u-form-item label="维保类型">
				<u-input type="text" style="display:none" v-model="Maintenanceinfo.maintenanceType" />
				<u-input v-model="typeValue" :type="type" :border="border" placeholder="选择维保类型" @click="typeShow = true" />
				<u-action-sheet :list="typeList" v-model="typeShow" @click="typeCallback"></u-action-sheet>
			</u-form-item>
			<u-form-item label="维保状态">
				<u-input type="text" style="display:none" v-model="Maintenanceinfo.maintenanceStatus" />
				<u-input v-model="statusValue" :type="type" :border="border" placeholder="选择维保状态" @click="statusShow = true"  />
				<u-action-sheet :list="statusList" v-model="statusShow" @click="statusCallback" ></u-action-sheet>
			</u-form-item>
			<u-form-item label="维保描述" ><u-input v-model="Maintenanceinfo.maintenanceRemark" :border="true"/></u-form-item>
			<u-form-item label="维保意见" ><u-input v-model="Maintenanceinfo.disposalOpinions" /></u-form-item>
			<u-form-item label="维保图片" ><u-input v-model="Maintenanceinfo.maintenancePic" /></u-form-item>
			<u-form-item label="维保视频" ><u-input v-model="Maintenanceinfo.maintenanceVideo" /></u-form-item>
			
			<u-button @click="submit" type="primary" shape="square" size="medium" style="margin: 48rpx auto;display: block;width: 30%;">提交</u-button>
		</u-form>
		
		<!--选择器内容-->
		<u-select mode="single-column" :list="enterpriseList" value-name="ucId" label-name="enterpriseName"  v-model="enterpriseShow" @confirm="enterpriseConfirm"></u-select>
		
		<u-select mode="single-column" :list="equipmentList" value-name="ucId" label-name="name"  v-model="equipmentShow" @confirm="equipmentConfirm"></u-select>
	</view>
</template>

<script>
export default {
	data() {
			return {
				Maintenanceinfo: {
					enterpriseName:'',
					enterpriseId:'',
					equipmentName:'',
					equipmentId:'',
				},
				enterpriseShow:false,
				enterpriseList:[],
				equipmentShow:false,
				equipmentList:[],
				
				// 设备id
				equipmentId:0,
				equipmentIdValue:"",
				equipmentIdShow:false,
				
				
			
				maintenanceEnterprise: 0,
				maintenanceEnterpriseValue: "",
				type: 'select',
				maintenanceEnterpriseShow: false,
				border: true,
				maintenanceEnterpriseList: [],
				maintenanceUser: 0,
				maintenanceUserValue: "",
				maintenanceUserShow: false,
				border: true,
				maintenanceUserList: [],
				
				typeShow: false,
				typeValue:"",
				typeList:[{
						value: '0',
						text: '正常维护'
					},{
						value: '1',
						text: '维修机器'
					},{
						value: '2',
						text: '更换机器'
					},],
					
				statusShow: false,
				statusValue:"",
				statusList:[{
						value: '0',
						text: '未维护'
					},{
						value: '1',
						text: '维护中'
					},{
						value: '2',
						text: '维护完成'
					},],
				
				DataId:"",
				MaintenanceList: [],
				pageNum: 0,
				finished: false,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多数据了'
				},
				shows: false,
				rules:{
					enName: [
							// 必填规则
						{
							required: true,
							message: '此为必填字段',
							// blur和change事件触发检验
							trigger: ['blur', 'change'],
						}
					],
					eqName: [
						{
							required: true,
							message: '请选择设备名称', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					]
				},
			}
		},
		onReady() {
			this.$refs.maintenanceinfoForm.setRules(this.rules);
		},
		onLoad(e) {
			this.DataId = e.ucId
			this.initView(e.ucId)
			
			// 修改返回数据
			this.getEquipmentMaintenanceInfo(e.ucId)
		},
		// 显示下拉框内容
		onShow() {
			this.showMaintenanceEnterprise()
			this.showMaintenanceUser()
			this.showMaintenanceEnterpriseid()
		},
		methods: {
			// 修改返回数据   
			getEquipmentMaintenanceInfo(val) {
				// if 判断是增加方法还是修改方法
				if (undefined == val || null == val) {
					return;
				}
				this.utils.request("/api/app/maintenance/getInEquipmentMaintenanceVo", {deleted:false,ucId: val}, "post", "app", true).then(res => {
					console.log(res)
					this.Maintenanceinfo = res.data
					this.MaintenanceData = res.data
				}).catch(error => {
					console.log(error)
				})
			},
			
			// 维保企业id
			enterpriseIdCallback(index){
				this.Maintenanceinfo.enterpriseId=this.enterpriseIdList[index].id
				this.enterpriseIdValue=this.enterpriseIdList[index].text
			},
			// 设备id
			equipmentIdCallback(index){
				this.Maintenanceinfo.equipmentId=this.equipmentIdList[index].id
				this.equipmentIdValue=this.equipmentIdList[index].text
			},
			// 维保企业
			maintenanceEnterpriseCallback(index) {
				this.Maintenanceinfo.maintenanceEnterprise = this.maintenanceEnterpriseList[index].id
				this.maintenanceEnterpriseValue = this.maintenanceEnterpriseList[index].text
			},
			// 维保人员
			maintenanceUserCallback(index) {
				this.Maintenanceinfo.maintenanceUser = this.maintenanceUserList[index].id
				this.maintenanceUserValue = this.maintenanceUserList[index].text
			},
			// 维保类型
			typeCallback(index) {
				this.Maintenanceinfo.maintenanceType = this.typeList[index].value
				this.typeValue = this.typeList[index].text
			},
			// 维保状态
			statusCallback(index) {
				this.Maintenanceinfo.maintenanceStatus = this.statusList[index].value
				this.statusValue = this.statusList[index].text
			},
			
			// 维保企业id
			showMaintenanceEnterpriseid() {
				this.utils.request("/api/app/enterprise/getList", {enterpriseType:0,}, "post", "app", true).then(res => {
					this.enterpriseList = res.data
				}).catch(error => {
					console.log(error)
				})
			},
			// 设备id
			showMaintenanceEquipmentId(val) {
				this.utils.request("/api/app/equipment/getEquipmentList", {enterpriseId:val,}, "post", "app", true).then(res => {
					this.equipmentList=res.data
				}).catch(error => {
					console.log(error)
				})
			},
			// 维保企业
			showMaintenanceEnterprise() {
				this.utils.request("/api/app/enterprise/getList", {enterpriseType:1}, "post", "app", true).then(res => {
					this.maintenanceEnterpriseList.length = 0
					res.data.forEach((item, index) => {
						let temp = {};
						temp.id = item.id
						temp.text = item.enterpriseName
						this.maintenanceEnterpriseList.push(temp);
					})
				}).catch(error => {
					console.log(error)
				})
			},
			// 维保人员
			showMaintenanceUser() {
				this.utils.request("/api/app/user/getUserPage", {}, "post", "app", true).then(res => {
					this.maintenanceUserList.length = 0
					res.data.list.forEach((item, index) => {
						let temp = {};
						temp.id = item.id
						temp.text = item.name
						this.maintenanceUserList.push(temp);
					})
				}).catch(error => {
					console.log(error)
				})
			},
			//  初始化
			initView(val) {
			// if 判断是增加方法还是修改方法
				if (undefined == val || null == val) {
					return;
				}
				this.MaintenanceList = []
				this.pageNum = 0
				this.getEquipmentMaintenancePage(val)
			},
			//获取设备分页信息数据
			getEquipmentMaintenancePage(val){
				this.pageNum++
				let _this = this
				return new Promise((resolve, reject) => {
					_this.utils.request("/api/app/maintenance/getEquipmentMaintenancePage", {pageNum:this.pageNum,pageSize:10,deleted:false,equipmentId:val}, "post", "app", true).then(res => {
						_this.MaintenanceList.push(...res.data.list)
						_this.finished = (res.data.pageNum >= res.data.pages);
						if(_this.finished){
							_this.status = 'nomore';
						}
						resolve(res)
					}).catch(error => {
						reject(error)
					})
				})
			},
			onReachBottom() {
				if(this.finished) return ;
				this.status = 'loading';
				this.getEquipmentMaintenancePage().then(res=>{
					if(this.finished) this.status = 'nomore';
					else this.status = 'loading';
				}).catch(error=>{
					this.status = 'nomore';
				})
			},
			// 点击提交
			submit() { 
				// if 判断是增加方法还是修改方法
				if (this.DataId == null) {
					this.utils.request("/api/app/maintenance/addInEquipmentMaintenance", this.Maintenanceinfo, "post", "app", true).then(res => {
						console.log(`返回结果：`, res)
						if(res.code == 0){
							this.shows = false
							this.Maintenanceinfo = {}
						// 返回上一步路由，返回上一个标签页
							this.$router.go(-1);
						}
					}).catch(error => {
						console.log(error)
					})
				}else{
					this.utils.request("/api/app/maintenance/updateInEquipmentMaintenance", this.Maintenanceinfo, "post", "app", true).then(res => {
					console.log(`返回结果：`, res)
					if(res.code == 0){
						this.shows = false
						this.Maintenanceinfo = {}
					// 返回上一步路由，返回上一个标签页
						this.$router.go(-1);
					}
				}).catch(error => {
					console.log(error)
					})
				}
			},

			enterpriseConfirm(e) {
				e.map((val, index) => {
					this.Maintenanceinfo.enterpriseName = val.label
					this.Maintenanceinfo.enterpriseId = val.value
					this.showMaintenanceEquipmentId(val.value)
				})
			},
			equipmentConfirm(e){
				e.map((val, index) => {
					this.Maintenanceinfo.equipmentName = val.label
					this.Maintenanceinfo.equipmentId = val.value
				})
			}
		}
	}
</script>

<style>

</style>
